<template>
  <div class="title-block">
    <div class="title-block-wrap">
      <div
        class="title"
        :style="{
          'align-items': props.compData.data.location == 'center' ? 'center' : 'flex-start',
          'margin-left': props.compData.data.skew + 'px',
        }"
      >
        <div
          class="sa-m-b-6"
          :style="{
            'font-size': compData.data.title.textFontSize + 'px',
            color: compData.data.title.color,
            'font-weight': compData.data.title.other.includes('bold') ? 'bold' : '',
            'font-style': compData.data.title.other.includes('italic') ? 'italic' : '',
          }"
        >
          {{ compData.data.title.text }}
        </div>
        <div
          :style="{
            'font-size': compData.data.subtitle.textFontSize + 'px',
            color: compData.data.subtitle.color,
            'font-weight': compData.data.subtitle.other.includes('bold') ? 'bold' : '',
            'font-style': compData.data.subtitle.other.includes('italic') ? 'italic' : '',
          }"
        >
          {{ compData.data.subtitle.text }}
        </div>
      </div>
      <sa-image :url="compData.data.src" radius="0" :suffix="null"></sa-image>
      <div v-if="compData.data.more.show" class="more sa-flex">
        更多
        <el-icon>
          <ArrowRight />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['compData']);
</script>

<style lang="scss" scoped>
  .title-block {
    .title-block-wrap {
      position: relative;
      height: 100%;
      .title {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 8;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .sa-image {
        height: 100%;
      }
      .more {
        position: absolute;
        right: 10px;
        top: 0;
        line-height: 40px;
        font-size: 12px;
        color: #999;
      }
    }
  }
</style>
